/*
登录
*/ 
<template>
  <div class="login" style="height:100%;">
    <div class="box">
      <img id="login" height="50px" />
      <div class="userMsg">
        <h3>频谱管理系统</h3>
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
          <div class="ruleForm" style="display:inline-block;">
            <!-- 账号 -->
            <el-form-item prop="userName" style="padding-bottom:20px;">
              <el-input
                v-model="ruleForm.userName"
                placeholder="请输入账号"
                @keydown.enter.native="searchEnter"
              >
                <i slot="prefix" class="iconfont iconCP_yonghushu"></i>
              </el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="passWord">
              <el-input
                id="password"
                type="password"
                v-model="ruleForm.passWord"
                placeholder="请输入密码"
                @keydown.enter.native="searchEnter"
              >
                <i slot="prefix" class="iconfont iconCP_mima"></i>
              </el-input>
            </el-form-item>
            <!-- 忘记密码 -->
            <div class="forgetPwd" style="text-align:right;font-size:14px;margin-top:-10px;">
              <span @click="forgetPwd" style="cursor:pointer;">忘记密码</span>
            </div>
            <!-- 登录 -->
            <el-form-item>
              <el-button
                class="loginBtn"
                @click="onSubmit"
                type="primary"
                style="width:280px;height: 45px;margin-top: 20px;"
              >登录</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        userName: "", //用户名
        passWord: "", //密码
        isShow: false //密码是否可见
      },
      // 校验
      rules: {
        userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  created() {},
  methods: {
    // 密码是否可见----状态
    getPwd(e) {
      var pwdType = document.getElementById("password"); //设置密码type
      this.isShow = !this.isShow;
      if (this.isShow) {
        document.getElementById("showPwd").style.color = "red";
        pwdType.setAttribute("type", "text");
      } else {
        document.getElementById("showPwd").style.color = "";
        pwdType.setAttribute("type", "password");
      }
    },
    // 忘记密码
    forgetPwd() {
      this.$confirm("请联系系统管理员修改密码 025-88888888", "忘记密码", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {})
        .catch(() => {});
    },
    // 回车事件
    searchEnter() {
      this.onSubmit();
    },
    // 登录
    onSubmit() {
      if (this.ruleForm.userName === "") {
        this.$message.error("请输入登录账号");
        return;
      } else if (this.ruleForm.passWord === "") {
        this.$message.error("请输入密码");
        return;
      } else {
        if (
          this.ruleForm.userName === "admin" &&
          this.ruleForm.passWord === "admin123"
        ) {
          sessionStorage.setItem("role", "admin");
        } else {
          sessionStorage.setItem("role", "user");
        }
        this.$message.success("登录成功");
        this.$router.push("/homeStatistics");
      }
    }
  }
};
</script>
<style scoped>
.login {
  background-image: url("./../../static/img/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#login {
  display: inline-block;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 12%;
}
.userMsg {
  width: 360px;
  height: 400px;
  text-align: center;
  background-color: #ffffff;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 8px;
  box-shadow: 0 0 20px 10px rgba(75, 71, 71, 0.1);
}
h3 {
  font-size: 20px;
  color: #333333;
  padding: 50px 0;
}
.el-form-item {
  text-align: center;
}
.el-form-item__content {
  margin-left: 0;
}
.el-input {
  display: inline-block;
  width: 280px;
  height: 45px;
  border-radius: 4px;
}
.ruleForm >>> .el-input__prefix {
  line-height: 45px;
  padding-left: 5px;
}
.ruleForm >>> .el-input--suffix {
  line-height: 45px;
}
.ruleForm >>> .el-input--small .el-input__inner {
  height: 45px;
  line-height: 45px;
}
</style>
